<template>
  <div class="head" v-loading="load">
    <div class="title">
      <div style="display: flex; align-items: center">
        <div class="txt">{{ type === '1' ? '收款方式：' : '付款方式：' }}</div>
        <div style="display: flex; align-items: center" v-if="difference === 0">
          <el-icon class="icon" style="color: #67c23a"><SuccessFilled /></el-icon>
          <span class="icon-txt" style="color: #67c23a">
            合计：{{ numberFormat(allPrice) }}&nbsp;(与合同金额相等)
          </span>
        </div>
        <div style="display: flex; align-items: center" v-else>
          <el-icon class="icon"><WarningFilled /></el-icon>
          <span class="icon-txt">
            合计：{{ numberFormat(allPrice) }}&nbsp;(与合同差额：{{ numberFormat(difference) }}元)
          </span>
        </div>
      </div>
      <el-button
        v-if="props.ifEnd === '履行中'"
        :disabled="difference < 0"
        type="primary"
        icon="Plus"
        @click="openAddPayment({})"
        >新增</el-button
      >
    </div>
    <el-table :data="approachTableList" border stripe style="width: 100%; height: 280px">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column label="收/付款节点">
        <template #default="scope">
          <div
            >{{ scope.row.pointName }}【{{
              scope.row.pointTime ? scope.row.pointTime : '未定'
            }}】后{{ scope.row.dayNumber }}天</div
          >
        </template>
      </el-table-column>
      <el-table-column v-if="type === '1'" label="百分比(%)" width="130px">
        <template #default="scope">
          <span>{{ numberFormat(scope.row.collectionPercent) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="type === '1'" label="收款金额(元)" width="120px">
        <template #default="scope">
          <span>{{ numberFormat(scope.row.collectionAmount) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="type === '1'" prop="approachTime" label="收款时间" width="120px" />
      <el-table-column v-if="type === '0'" label="百分比(%)" width="130px">
        <template #default="scope">
          <span>{{ numberFormat(scope.row.paymentPercent) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="type === '0'" label="付款金额(元)" width="120px">
        <template #default="scope">
          <span>{{ numberFormat(scope.row.paymentAmount) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="type === '0'" prop="approachTime" label="付款时间" width="130px" />
      <el-table-column prop="state" label="状态" width="150px">
        <template #default="scope">
          {{ getState(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
      <el-table-column fixed="right" label="操作" width="120" v-if="props.ifEnd === '履行中'">
        <template #default="scope">
          <el-button
            link
            type="primary"
            :disabled="difference < 0"
            size="large"
            @click="openAddPayment(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            v-if="scope.row.canDelete"
            link
            type="primary"
            size="large"
            @click="del(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <PointDrawer ref="pointDrawer" @getData="emit('getAllData')"></PointDrawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import PointDrawer from './components/pointDrawer.vue'
  import { numberFormat } from '@/utils/numberFormat.ts'
  import {
    getCollectionCycleGetDetailByContractId,
    deleteCollectionCycleRemoveById,
    getCollectionCycleGetDifferenceByContractId,
  } from '@/api/controller/collection-cycle-controller/index'
  import {
    getPaymentCycleGetDetailByContractId,
    deletePaymentCycleRemoveById,
    getPaymentCycleGetDifferenceByContractId,
  } from '@/api/controller/payment-cycle-controller/index'

  let props = defineProps({
    ifEnd: {
      type: String,
    },
  })

  const load = ref(true)
  //获取数据
  const approachTableList = ref([])
  const difference = ref(0)
  const allPrice = ref(0)
  const type = ref(history.state?.contractType)
  const contractId = ref(history.state?.contractId)
  const getData = async () => {
    try {
      load.value = true
      let res
      if (type.value === '1') {
        res = await getCollectionCycleGetDetailByContractId({
          contractId: contractId.value,
        })
        approachTableList.value = res.data
        res = await getCollectionCycleGetDifferenceByContractId({
          contractId: contractId.value,
        })
        difference.value = res.data.differencePrice
        allPrice.value = res.data.allPrice
      } else {
        res = await getPaymentCycleGetDetailByContractId({
          contractId: contractId.value,
        })
        approachTableList.value = res.data
        res = await getPaymentCycleGetDifferenceByContractId({
          contractId: contractId.value,
        })
        difference.value = res.data.differencePrice
        allPrice.value = res.data.allPrice
      }
    } finally {
      load.value = false
    }
  }

  //打开付款/收款方式
  const pointDrawer = ref()
  const openAddPayment = (row) => {
    pointDrawer.value.show(row, contractId.value, type.value)
  }

  const del = (row) => {
    console.log('特色')
    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    })
      .then(async () => {
        let result
        if (type.value === '1') {
          result = await deleteCollectionCycleRemoveById({ id: row.id }, { loading: true })
        } else {
          result = await deletePaymentCycleRemoveById({ id: row.id }, { loading: true })
        }
        if (result.code === 200) {
          emit('getAllData')
          ElMessage.success('删除成功')
        }
      })
      .catch(() => {
        console.log('错误')
      })
  }

  //根据已收金额展示状态
  const getState = (row) => {
    if (row.state === 0) {
      return '未收款'
    } else if (row.state === row?.paymentAmount || row.state === row?.collectionAmount) {
      return '已完成'
    } else {
      if (row.collectionAmount) {
        return '已收' + numberFormat(row.state) + '元'
      } else {
        return '已付' + numberFormat(row.state) + '元'
      }
    }
  }
  const emit = defineEmits(['getAllData'])
  defineExpose({
    getData,
  })
</script>

<style lang="scss" scoped>
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .txt {
      font-size: 16px;
      font-weight: 700;
    }
    .icon {
      width: 20px;
      height: 20px;
      color: red;
      margin-right: 6px;
    }
    .icon-txt {
      color: red;
      font-size: 14px;
    }
  }
  .head {
    background-color: white;
    margin: 20px 0 16px 0;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
    .link {
      color: #1890ff;
      margin-right: 30px;
      text-decoration: underline;
      background-color: transparent;
      outline: none;
      cursor: pointer;
      transition: color 0.3s;
    }
    .link:hover {
      color: #40a9ff;
    }
  }
</style>
